<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>iconfont Demo</title>
    <link href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
          rel="shortcut icon"
          type="image/x-icon"/>
    <link href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" rel="icon"
          type="image/svg+xml"/>
    <link href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" rel="stylesheet">
    <link href="demo.css" rel="stylesheet">
    <link href="iconfont.css" rel="stylesheet">
    <script src="iconfont.js"></script>
    <!-- jQuery -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
    <!-- 代码高亮 -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
    <style>
        .main .logo {
            margin-top: 0;
            height: auto;
        }

        .main .logo a {
            display: flex;
            align-items: center;
        }

        .main .logo .sub-title {
            margin-left: 0.5em;
            font-size: 22px;
            color: #fff;
            background: linear-gradient(-45deg, #3967FF, #B500FE);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
<div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" target="_blank" title="iconfont 首页">
        <img src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
             width="200">

        <span class="sub-title">彩色字体</span>

    </a></h1>
    <div class="nav-tabs">
        <ul class="dib-box" id="tabs">
            <li class="dib active"><span>Unicode</span></li>
            <li class="dib"><span>Font class</span></li>
            <li class="dib"><span>Symbol</span></li>
        </ul>

        <a class="nav-more" href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4601680"
           target="_blank">查看项目</a>

    </div>
    <div class="tab-container">
        <div class="content unicode" style="display: block;">
            <ul class="icon_lists dib-box">

                <li class="dib">
                    <span class="icon smart-icons">&#xe605;</span>
                    <div class="name">首页</div>
                    <div class="code-name">&amp;#xe605;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe603;</span>
                    <div class="name">对话</div>
                    <div class="code-name">&amp;#xe603;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe663;</span>
                    <div class="name">系统监控</div>
                    <div class="code-name">&amp;#xe663;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xecd1;</span>
                    <div class="name">swagger</div>
                    <div class="code-name">&amp;#xecd1;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe61b;</span>
                    <div class="name">Nacos</div>
                    <div class="code-name">&amp;#xe61b;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe602;</span>
                    <div class="name">表情</div>
                    <div class="code-name">&amp;#xe602;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe649;</span>
                    <div class="name">招聘流程</div>
                    <div class="code-name">&amp;#xe649;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe647;</span>
                    <div class="name">招聘</div>
                    <div class="code-name">&amp;#xe647;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe658;</span>
                    <div class="name">岗位</div>
                    <div class="code-name">&amp;#xe658;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe722;</span>
                    <div class="name">岗位分类</div>
                    <div class="code-name">&amp;#xe722;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe60b;</span>
                    <div class="name">资讯</div>
                    <div class="code-name">&amp;#xe60b;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe6a5;</span>
                    <div class="name">在线状态</div>
                    <div class="code-name">&amp;#xe6a5;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe610;</span>
                    <div class="name">门店</div>
                    <div class="code-name">&amp;#xe610;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe638;</span>
                    <div class="name">口味</div>
                    <div class="code-name">&amp;#xe638;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe64c;</span>
                    <div class="name">菜品</div>
                    <div class="code-name">&amp;#xe64c;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe624;</span>
                    <div class="name">22_菜品分类</div>
                    <div class="code-name">&amp;#xe624;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe7d0;</span>
                    <div class="name">上涨</div>
                    <div class="code-name">&amp;#xe7d0;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe623;</span>
                    <div class="name">练习</div>
                    <div class="code-name">&amp;#xe623;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe604;</span>
                    <div class="name">题库管理管理</div>
                    <div class="code-name">&amp;#xe604;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe666;</span>
                    <div class="name">试题管理</div>
                    <div class="code-name">&amp;#xe666;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe601;</span>
                    <div class="name">考试管理</div>
                    <div class="code-name">&amp;#xe601;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe62b;</span>
                    <div class="name">课次</div>
                    <div class="code-name">&amp;#xe62b;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe6d0;</span>
                    <div class="name">文件资源管理</div>
                    <div class="code-name">&amp;#xe6d0;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe625;</span>
                    <div class="name">静态资源</div>
                    <div class="code-name">&amp;#xe625;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe627;</span>
                    <div class="name">教学教育</div>
                    <div class="code-name">&amp;#xe627;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe609;</span>
                    <div class="name">课程</div>
                    <div class="code-name">&amp;#xe609;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe63c;</span>
                    <div class="name">科目管理</div>
                    <div class="code-name">&amp;#xe63c;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe600;</span>
                    <div class="name">系统管理</div>
                    <div class="code-name">&amp;#xe600;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe622;</span>
                    <div class="name">用户管理</div>
                    <div class="code-name">&amp;#xe622;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe607;</span>
                    <div class="name">角色管理</div>
                    <div class="code-name">&amp;#xe607;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe713;</span>
                    <div class="name">权限管理</div>
                    <div class="code-name">&amp;#xe713;</div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons">&#xe60a;</span>
                    <div class="name">资源管理</div>
                    <div class="code-name">&amp;#xe60a;</div>
                </li>

            </ul>
            <div class="article markdown">
                <h2 id="unicode-">Unicode 引用</h2>
                <hr>

                <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
                <ul>
                    <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
                    <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
                </ul>
                <blockquote>
                    <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
                        引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
                </blockquote>
                <p>Unicode 使用步骤如下：</p>
                <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
                <pre><code class="language-css"
                >@font-face {
  font-family: 'smart-icons';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1739850270032') format('woff'),
       url('iconfont.ttf?t=1739850270032') format('truetype');
}
</code></pre>
                <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
                <pre><code class="language-css"
                >.smart-icons {
  font-family: "smart-icons" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
                <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
                <pre>
<code class="language-html"
>&lt;span class="smart-icons"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
                <blockquote>
                    <p>"smart-icons" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                </blockquote>
            </div>
        </div>
        <div class="content font-class">
            <ul class="icon_lists dib-box">

                <li class="dib">
                    <span class="icon smart-icons smart-village-shouye"></span>
                    <div class="name">
                        首页
                    </div>
                    <div class="code-name">.smart-village-shouye
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-duihua"></span>
                    <div class="name">
                        对话
                    </div>
                    <div class="code-name">.smart-village-duihua
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-xitongjiankong"></span>
                    <div class="name">
                        系统监控
                    </div>
                    <div class="code-name">.smart-village-xitongjiankong
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-swagger"></span>
                    <div class="name">
                        swagger
                    </div>
                    <div class="code-name">.smart-village-swagger
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-Nacos"></span>
                    <div class="name">
                        Nacos
                    </div>
                    <div class="code-name">.smart-village-Nacos
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-biaoqing"></span>
                    <div class="name">
                        表情
                    </div>
                    <div class="code-name">.smart-village-biaoqing
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-zhaopinliucheng"></span>
                    <div class="name">
                        招聘流程
                    </div>
                    <div class="code-name">.smart-village-zhaopinliucheng
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-zhaopin"></span>
                    <div class="name">
                        招聘
                    </div>
                    <div class="code-name">.smart-village-zhaopin
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-gangwei"></span>
                    <div class="name">
                        岗位
                    </div>
                    <div class="code-name">.smart-village-gangwei
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-gangweifenlei"></span>
                    <div class="name">
                        岗位分类
                    </div>
                    <div class="code-name">.smart-village-gangweifenlei
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-zixun"></span>
                    <div class="name">
                        资讯
                    </div>
                    <div class="code-name">.smart-village-zixun
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-zaixianzhuangtai"></span>
                    <div class="name">
                        在线状态
                    </div>
                    <div class="code-name">.smart-village-zaixianzhuangtai
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-mendian"></span>
                    <div class="name">
                        门店
                    </div>
                    <div class="code-name">.smart-village-mendian
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-kouwei"></span>
                    <div class="name">
                        口味
                    </div>
                    <div class="code-name">.smart-village-kouwei
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-caipin"></span>
                    <div class="name">
                        菜品
                    </div>
                    <div class="code-name">.smart-village-caipin
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-22_caipinfenlei"></span>
                    <div class="name">
                        22_菜品分类
                    </div>
                    <div class="code-name">.smart-village-22_caipinfenlei
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-shangzhang"></span>
                    <div class="name">
                        上涨
                    </div>
                    <div class="code-name">.smart-village-shangzhang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-lianxi"></span>
                    <div class="name">
                        练习
                    </div>
                    <div class="code-name">.smart-village-lianxi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-tikuguanliguanli"></span>
                    <div class="name">
                        题库管理管理
                    </div>
                    <div class="code-name">.smart-village-tikuguanliguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-shitiguanli"></span>
                    <div class="name">
                        试题管理
                    </div>
                    <div class="code-name">.smart-village-shitiguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-kaoshiguanli"></span>
                    <div class="name">
                        考试管理
                    </div>
                    <div class="code-name">.smart-village-kaoshiguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-keci"></span>
                    <div class="name">
                        课次
                    </div>
                    <div class="code-name">.smart-village-keci
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-wenjianziyuanguanli"></span>
                    <div class="name">
                        文件资源管理
                    </div>
                    <div class="code-name">.smart-village-wenjianziyuanguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-jingtaiziyuan"></span>
                    <div class="name">
                        静态资源
                    </div>
                    <div class="code-name">.smart-village-jingtaiziyuan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-jiaoxuejiaoyu"></span>
                    <div class="name">
                        教学教育
                    </div>
                    <div class="code-name">.smart-village-jiaoxuejiaoyu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-kecheng"></span>
                    <div class="name">
                        课程
                    </div>
                    <div class="code-name">.smart-village-kecheng
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-kemuguanli-"></span>
                    <div class="name">
                        科目管理
                    </div>
                    <div class="code-name">.smart-village-kemuguanli-
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-xitongguanli"></span>
                    <div class="name">
                        系统管理
                    </div>
                    <div class="code-name">.smart-village-xitongguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-yonghuguanli"></span>
                    <div class="name">
                        用户管理
                    </div>
                    <div class="code-name">.smart-village-yonghuguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-jiaoseguanli"></span>
                    <div class="name">
                        角色管理
                    </div>
                    <div class="code-name">.smart-village-jiaoseguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-quanxianguanli"></span>
                    <div class="name">
                        权限管理
                    </div>
                    <div class="code-name">.smart-village-quanxianguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon smart-icons smart-village-ziyuanguanli"></span>
                    <div class="name">
                        资源管理
                    </div>
                    <div class="code-name">.smart-village-ziyuanguanli
                    </div>
                </li>

            </ul>
            <div class="article markdown">
                <h2 id="font-class-">font-class 引用</h2>
                <hr>

                <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
                <p>与 Unicode 使用方式相比，具有如下特点：</p>
                <ul>
                    <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
                    <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
                </ul>
                <p>使用步骤如下：</p>
                <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
                <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
                <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
                <pre><code class="language-html">&lt;span class="smart-icons smart-village-xxx"&gt;&lt;/span&gt;
</code></pre>
                <blockquote>
                    <p>"
                        smart-icons" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                </blockquote>
            </div>
        </div>
        <div class="content symbol">
            <ul class="icon_lists dib-box">

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-shouye"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="code-name">#smart-village-shouye</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-duihua"></use>
                    </svg>
                    <div class="name">对话</div>
                    <div class="code-name">#smart-village-duihua</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-xitongjiankong"></use>
                    </svg>
                    <div class="name">系统监控</div>
                    <div class="code-name">#smart-village-xitongjiankong</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-swagger"></use>
                    </svg>
                    <div class="name">swagger</div>
                    <div class="code-name">#smart-village-swagger</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-Nacos"></use>
                    </svg>
                    <div class="name">Nacos</div>
                    <div class="code-name">#smart-village-Nacos</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-biaoqing"></use>
                    </svg>
                    <div class="name">表情</div>
                    <div class="code-name">#smart-village-biaoqing</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-zhaopinliucheng"></use>
                    </svg>
                    <div class="name">招聘流程</div>
                    <div class="code-name">#smart-village-zhaopinliucheng</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-zhaopin"></use>
                    </svg>
                    <div class="name">招聘</div>
                    <div class="code-name">#smart-village-zhaopin</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-gangwei"></use>
                    </svg>
                    <div class="name">岗位</div>
                    <div class="code-name">#smart-village-gangwei</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-gangweifenlei"></use>
                    </svg>
                    <div class="name">岗位分类</div>
                    <div class="code-name">#smart-village-gangweifenlei</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-zixun"></use>
                    </svg>
                    <div class="name">资讯</div>
                    <div class="code-name">#smart-village-zixun</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-zaixianzhuangtai"></use>
                    </svg>
                    <div class="name">在线状态</div>
                    <div class="code-name">#smart-village-zaixianzhuangtai</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-mendian"></use>
                    </svg>
                    <div class="name">门店</div>
                    <div class="code-name">#smart-village-mendian</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-kouwei"></use>
                    </svg>
                    <div class="name">口味</div>
                    <div class="code-name">#smart-village-kouwei</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-caipin"></use>
                    </svg>
                    <div class="name">菜品</div>
                    <div class="code-name">#smart-village-caipin</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-22_caipinfenlei"></use>
                    </svg>
                    <div class="name">22_菜品分类</div>
                    <div class="code-name">#smart-village-22_caipinfenlei</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-shangzhang"></use>
                    </svg>
                    <div class="name">上涨</div>
                    <div class="code-name">#smart-village-shangzhang</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-lianxi"></use>
                    </svg>
                    <div class="name">练习</div>
                    <div class="code-name">#smart-village-lianxi</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-tikuguanliguanli"></use>
                    </svg>
                    <div class="name">题库管理管理</div>
                    <div class="code-name">#smart-village-tikuguanliguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-shitiguanli"></use>
                    </svg>
                    <div class="name">试题管理</div>
                    <div class="code-name">#smart-village-shitiguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-kaoshiguanli"></use>
                    </svg>
                    <div class="name">考试管理</div>
                    <div class="code-name">#smart-village-kaoshiguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-keci"></use>
                    </svg>
                    <div class="name">课次</div>
                    <div class="code-name">#smart-village-keci</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-wenjianziyuanguanli"></use>
                    </svg>
                    <div class="name">文件资源管理</div>
                    <div class="code-name">#smart-village-wenjianziyuanguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-jingtaiziyuan"></use>
                    </svg>
                    <div class="name">静态资源</div>
                    <div class="code-name">#smart-village-jingtaiziyuan</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-jiaoxuejiaoyu"></use>
                    </svg>
                    <div class="name">教学教育</div>
                    <div class="code-name">#smart-village-jiaoxuejiaoyu</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-kecheng"></use>
                    </svg>
                    <div class="name">课程</div>
                    <div class="code-name">#smart-village-kecheng</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-kemuguanli-"></use>
                    </svg>
                    <div class="name">科目管理</div>
                    <div class="code-name">#smart-village-kemuguanli-</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-xitongguanli"></use>
                    </svg>
                    <div class="name">系统管理</div>
                    <div class="code-name">#smart-village-xitongguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-yonghuguanli"></use>
                    </svg>
                    <div class="name">用户管理</div>
                    <div class="code-name">#smart-village-yonghuguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-jiaoseguanli"></use>
                    </svg>
                    <div class="name">角色管理</div>
                    <div class="code-name">#smart-village-jiaoseguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-quanxianguanli"></use>
                    </svg>
                    <div class="name">权限管理</div>
                    <div class="code-name">#smart-village-quanxianguanli</div>
                </li>

                <li class="dib">
                    <svg aria-hidden="true" class="icon svg-icon">
                        <use xlink:href="#smart-village-ziyuanguanli"></use>
                    </svg>
                    <div class="name">资源管理</div>
                    <div class="code-name">#smart-village-ziyuanguanli</div>
                </li>

            </ul>
            <div class="article markdown">
                <h2 id="symbol-">Symbol 引用</h2>
                <hr>

                <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
                    这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
                <ul>
                    <li>支持多色图标了，不再受单色限制。</li>
                    <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
                    <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
                    <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
                </ul>
                <p>使用步骤如下：</p>
                <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
                <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
                <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
                <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
                <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
                <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
            </div>
        </div>

    </div>
</div>
<script>
    $(document).ready(function () {
        $('.tab-container .content:first').show()

        $('#tabs li').click(function (e) {
          var tabContent = $('.tab-container .content')
          var index = $(this).index()

          if ($(this).hasClass('active')) {
            return
          } else {
            $('#tabs li').removeClass('active')
            $(this).addClass('active')

            tabContent.hide().eq(index).fadeIn()
          }
        })
      })
</script>
</body>
</html>
